<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Translate API</title>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.13.1/lodash.min.js"></script>
    <script src="https://use.fontawesome.com/6364f396e2.js"></script>
    <link href="https://fonts.loli.net/css?family=Noto+Serif+SC|Noto+Sans+SC&display=swap" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
            font-family: "Noto Sans SC", PingFang SC,Helvetica Neue,Hiragino Sans GB,Segoe UI,Microsoft YaHei,微软雅黑,sans-serif;
        }
        body { 
            margin: auto;
            max-width: 750px;
        }
        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
            padding: 0 20px;
        }
        .header {
            text-align: center;
        }
        .logo {
            margin: .5em auto;
        }
        .logo span{
            vertical-align: middle;
            font-size: 1.5em;
        }
        .logo img {
            height: 50px;
            vertical-align: middle;
        }
        .platforms {
            position: relative;
            margin: 1em auto;
            width: 8em;
            text-align: center;
        }
        .platform-actived {
            cursor: pointer;
        }
        .platform-list {
            text-align: left;
            list-style: none;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 1.8em;
            left: 1.5em;
            color: #FFF;
            background-color: #343536;
            border: 1px solid #000;
            border-radius: .6em;
        }
        .platform-list::before {
            content: "\f0d8";
            color: #343536;
            font: normal normal normal 14px/1 FontAwesome;
            position: absolute;
            top: -9px;
            left: 60%;
        }
        .platform-item {
            cursor: pointer;
            padding: 5px;
        }
        .platform-item img, .platform-actived img{
            width: 15px;
            vertical-align: middle;
        }
        .translate-lang {
            display: flex;
        }
        .translate-swap {
            cursor: pointer;
        }
        .translate-from, .translate-to {
            flex: 1;
            text-align: center;
        }
        .translate-content {
            margin: 1em;
            display: flex;
            height: 10em; 
        }
        .translate-source, .translate-result {
            flex: 1;
            overflow: auto hidden; 
            height: 100%; 
            direction: ltr; 
            line-height: 1.5;   
            padding: 10px;
            border: #ddd 1px dashed;
            resize: none;
        }
        .loading {
            font-size: 24px;
        }
        .error {
            border: 1px solid #FF5722;
            background-color: #ffefe6;
            border-radius: 4px;
            color: #515a6e;
            padding: 8px 48px 8px 16px;
            margin: 10px 0;
        }
        .error i {
            color: #F44336;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header">
            <h1 class="logo">
                <img src="data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 469.333 469.333' style='enable-background:new 0 0 469.333 469.333;' xml:space='preserve'><g><g><g><path d='M253.227,300.267L253.227,300.267L199.04,246.72l0.64-0.64c37.12-41.387,63.573-88.96,79.147-139.307h62.507V64H192 V21.333h-42.667V64H0v42.453h238.293c-14.4,41.173-36.907,80.213-67.627,114.347c-19.84-22.08-36.267-46.08-49.28-71.467H78.72 c15.573,34.773,36.907,67.627,63.573,97.28l-108.48,107.2L64,384l106.667-106.667l66.347,66.347L253.227,300.267z'/><path d='M373.333,192h-42.667l-96,256h42.667l24-64h101.333l24,64h42.667L373.333,192z M317.333,341.333L352,248.853 l34.667,92.48H317.333z'/></g></g></g></svg>" alt="" srcset=""> 
                <span>Translate API Sample</span>
            </h1>
        </div>
        <div class="content">
            <div class="platforms">
                <div class="platform-actived" @click="choosePlatform = !choosePlatform"><img :src="platforms[platform][2]"> {{platforms[platform][1]}}</div>
                <ul class="platform-list" v-show="choosePlatform">
                    <li v-for="p, i in platforms" class="platform-item" @click="switchPlatform(i)"><img :src="p[2]"> {{p[1]}}</li>
                </ul>
            </div>
            <div class="translate-form">
                <div class="translate-lang">
                    <div class="translate-from">{{langs[lang.from]}}</div>
                    <div class="translate-swap fa fa-exchange" @click="swpLang()"></div>
                    <div class="translate-to">{{langs[lang.to]}}</div>
                </div>
                <div class="translate-content">
                    <textarea class="translate-source" rows="1" v-model="word"
                        spellcheck="false" 
                        autocapitalize="off" 
                        autocomplete="off" 
                        autocorrect="off" >
                    </textarea>
                    <div class="translate-result">
                        <i v-if="loading" class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom loading"></i>
                        <span v-if="!loading">{{result}}</span>
                    </div>
                </div>
            </div>
            <div class="error" v-if="error"><i class="fa fa-exclamation" aria-hidden="true"></i> 错误：{{error}}</div>
        </div>
        </div>
        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    api: '/',
                    lang: {
                        from: 'zh',
                        to: 'en',
                    },
                    langs: {
                        zh: 'Chinese',
                        en: 'English'
                    },
                    error: '',
                    platform: 0,
                    platforms: [
                        ['google', 'Google', 'https://translate.google.cn/favicon.ico'],
                        ['microsoft', 'Microsoft', 'https://www.microsoft.com/en-us/translator/wp-content/themes/ro-translator/img/banner-app-icon.png'],
                        ['yandex', 'Yandex', `data:image/svg+xml;charset=utf-8,%3Csvg width='56' height='56' viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate%2815.11 15.11%29' fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23000' cx='146.635' cy='73.146' r='73.146'/%3E%3Cpath d='M185.626 77.106c-2.193-5.48-6.43-9.77-12.321-12.517.968-4.683 1.292-8.48 1.394-10.966h-10.136c-.098 1.887-.355 4.683-1.03 8.13-7.908-1.147-16.819-.035-25.357 3.12a164.416 164.416 0 0 1-1.87-15.645c30.397-1.764 48.334-9.146 49.165-9.5l-3.899-9.42c-.186.08-17.165 7.01-45.66 8.711-.036-7.032.44-11.312.466-11.546H126.2c-.177 1.98-.475 6.118-.435 11.91-.315.004-.612.017-.937.022-9.084.022-17.529-.683-19.518-.864v10.257c2.98.261 10.186.82 18.386.82.395 0 .8-.005 1.208-.005.43-.004.83-.022 1.26-.027.4 5.827 1.169 12.5 2.514 19.784-13.453 8.06-24.131 23.704-18.692 36.425 2.286 5.34 6.695 8.764 12.423 9.637a19.2 19.2 0 0 0 2.97.222c5.79 0 12.432-2.366 18.772-6.39 4.152 6.226 7.495 9.5 7.797 9.784l6.962-7.413c-.067-.062-3.006-2.947-6.71-8.609 1.657-1.533 3.269-3.146 4.76-4.9a74.882 74.882 0 0 0 13.538-23.51c2.287 1.33 4.542 3.327 5.732 6.31 4.054 10.132-1.803 21.856-7.255 26.943l6.878 7.492c9.07-8.463 15.344-24.32 9.772-38.255m-61.702 28.237c-2.296-.354-3.73-1.462-4.64-3.593-2.504-5.862 2.93-15.42 11.784-21.795 2.215 8.117 5.052 14.985 7.938 20.559-5.412 3.527-10.949 5.445-15.082 4.83m25.347-13.86c-.71.833-1.47 1.613-2.228 2.392-2.518-5.161-4.951-11.44-6.802-18.866 5.665-2.304 11.504-3.527 16.916-3.527 1.23 0 2.437.062 3.618.19a64.722 64.722 0 0 1-11.504 19.81' fill='%23fff'/%3E%3Ccircle fill='%23f33' cx='73.146' cy='146.635' r='73.146'/%3E%3Cpath d='M67.798 100.736L33.883 183.15h13.88l8.339-21.925h34.303l8.34 21.925h13.875l-33.915-82.414H67.798zm5.455 17l12.632 32.28H60.617l12.636-32.28z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E`],
                        ['tencent', 'Tencent', 'https://fanyi.qq.com/favicon.ico'],
                        ['baidu', 'Baidu', 'https://fanyi-cdn.cdn.bcebos.com/static/translation/img/favicon/favicon_d87cd2a.ico'],
                        ['youdao', 'Youdao', 'http://shared.ydstatic.com/images/favicon.ico'],
                    ],
                    choosePlatform: false,
                    word: '',
                    result: '',
                    loading: false
                },
                created () {
                    this.debouncedTranslate = _.debounce(this.translate, 500)
                },
                mounted() {

                },
                computed: {
                    form() {
                        return {
                            word: this.word,
                            platform: this.platforms[this.platform][0],
                            ...this.lang
                        }
                    }
                },
                watch: {
                    word() {
                        if (this.word == '') this.result = '';      
                        this.debouncedTranslate();
                    }
                },
                methods: {
                    switchPlatform(i) {
                        this.platform = i;
                        this.choosePlatform = false;
                        this.translate();
                    },
                    swpLang() {
                        this.lang = { from: this.lang.to, to: this.lang.from };
                        this.translate()
                    },
                    translate() {
                        if(!this.word) return;
                        this.error = '';
                        let param = new FormData();

                        for(let k in this.form) {
                            param.append(k, this.form[k]);
                        }

                        this.loading = true;
                        axios.post(this.api, param, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }).then(rsp => {
                            this.loading = false;
                            rsp = rsp.data;
                            if (rsp.status) {
                                this.error = rsp.msg;
                                return;
                            }
                            this.result = rsp.data.text;
                            if (!this.result) this.swpLang();
                        }).catch(err => {
                            this.loading = false;
                            this.error = err.message;
                        })
                    }
                }
            })
        </script>
    </div>
    <div style="display: none;"><script type="text/javascript" src="https://s11.cnzz.com/z_stat.php?id=1260462968&web_id=1260462968"></script></div>
    <a href="https://github.com/imlinhanchao/translate-platform-api" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
</body>

</html>